<template>
  <div class="self_adaption">
    <div class="g-main">
      <div class="title">
        <div class="left">
          <!-- <span>设置</span> -->
          <div style="display: flex; align-items: center">
            <div v-if="userMes.photot != null">
              <img :src="userMes.photot" style="width: 2.5rem; height: 2.5rem; border-radius: 50%" />&nbsp;<span>{{
                userMes.name }}</span>
            </div>
            <div v-else>
              <img src="../../../assets/images/avtor.png" id="asdadsadasd"
                style="width: 2.5rem; height: 2.5rem; border-radius: 50%" />&nbsp;<span>{{
                  userMes.name }}</span>
            </div>
          </div>
        </div>
        <span v-if="weather!=null" style="font-size: 1.25rem; color: #8c9ec1; line-height: 1.75rem">{{ weather.province }}（ {{
          currentTimeElement }} ）{{
            weather.weather
          }}{{ weather.temperature }}℃</span>
      </div>
      <div class="center">
        <img src="../../../assets/images/welcomeText.png" alt="" class="welcome_photo" />
        <p style="
            width: 100%;
            text-align: center;
            margin-top: 1.25rem;
            letter-spacing: 0.3125rem;
          ">
          劣车宝服务平台
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { RequestCompaniesList, RequestPersonDetail } from "@/api/path/index.js";
import { weatherApi, Address } from "@/api/mapApi.js";
import { formatTime, formatTimeAll } from '@/filters/index'

const company = JSON.parse(localStorage.getItem("roleInfo")!).company;
const weather = ref<any>("");
const date = ref();
const currentTimeElement = ref<any>()
setInterval(() => {
  const currentTime = new Date();
  currentTimeElement.value = formatTimeAll(currentTime);
}, 1000)
const userInfo = JSON.parse(localStorage.getItem("roleInfo")!);
const userMes = ref({
  name: "",
  photot: "",
});
const getData = () => {
  /* 获取公司名称 */
  RequestCompaniesList(company).then((res: any) => {
    // console.log("公司", res);
    console.log("res.resultObj[0].address", res.resultObj[0].address);
    res.resultObj[0].address = res.resultObj[0].address.split(",")[0];
    // res.resultObj[0].address = res.resultObj[0].address.split(",")[1];
    weatherApi(res.resultObj[0].address).then((val: any) => {
      // console.log("天气天气天气天气天气", val);
      weather.value = val.data.lives[0];
      date.value =
        String(weather.value.reporttime).substring(6, 7) +
        "月" +
        String(weather.value.reporttime).substring(8, 10) +
        "日";
    });
  });
  RequestPersonDetail(userInfo.person).then((res: any) => {
    // if (res.resultObj.nationality != null) {
    //     res.resultObj.nationality = res.resultObj.nationality[0]
    // }
    // console.log("用户信息", res);

    userMes.value = {
      name: res.resultObj.name,
      photot: res.resultObj.photo,
    };
  });
  Address().then((res) => {
    // console.log("定位成功11111", res);
  });
  console.log('weather.value===========================>', weather.value);
};
getData();

</script>

<style scoped lang="scss">
.g-main {
  width: 100%;
  height: calc(100% - 3.75rem);
  margin: 1.25rem 0;
  background: url(../../../assets/images/welcome.png) no-repeat;
  background-size: 100% 100%;
  position: relative;

  .title {
    width: 96%;
    height: 5.625rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      width: 11rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1.25rem;
      color: #344360;
      line-height: 1.75rem;
    }
  }

  .center {
    width: 100%;
    height: 22.625rem;
    background: rgb(46, 87, 130, 0.5);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -11.3125rem;
    font-size: 3.125rem;
    color: #ffffff;
    line-height: 4.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
  }
}
</style>
